<template>
  <div id="footer">
    <div class="container-1200 flex flex-jc-sp" style="padding-top: 60px">
      <div class="flex flex-jc-sp" style="width: 580px">
        <div class="flex flex-fd-c flex-jc-sp" style="width: 420px">
          <div style="font-size: 30px">办公地址上赢诚，专业靠谱！</div>
          <div style="color: #a5b1bf">©2020 {{ setting.company }} 地址：{{ setting.address }}</div>
        </div>
        <div class="flex flex-fd-c flex-jc-c flex-ai-c">
          <img style="width: 96px; height: 96px; margin-bottom: 22px" :src="setting.qr_code" alt="" srcset="" />
          <div>扫码关注赢诚公众号</div>
        </div>
      </div>
      <div class="flex flex-fd-c flex-jc-c flex-ai-c">
        <div style="font-size: 30px; margin-bottom: 14px">
          客服服务：{{ setting.work_time }}
          <!-- (工作日 早8:00-晚21:00) -->
        </div>
        <div style="font-size: 30px">{{ setting.phone }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getApiSetting } from '@/api'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      setting: {
        address: '成都',
        company: '公司名称',
        describe: '网站描述',
        id: 1,
        keyword: '关键字',
        logo: 'http://m.huangxh.top\\uploadsadminarticle_thumb\\20210323\\50c014e68c540622b6eb16e6d90420d8.png',
        name: '就这租',
        phone: '18272716271',
        qr_code: 'http://m.huangxh.top\\uploadsadminarticle_thumb\\20210323\\158a5621291d9bd3cd14c005848e3290.png',
        work_time: '工作时间  19-19'
      }
    }
  },
  created() {
    getApiSetting().then((res) => {
      if (res.code === 200) {
        this.setting = res.data
        this.setSetting(res.data)
        document.title = res.data.name
      }
    })
  },
  methods: {
    ...mapMutations(['setSetting'])
  }
}
</script>

<style lang="less" scoped>
#footer {
  height: 430px;
  background-color: rgb(44, 44, 44);
  background-image: url(~@/assets/images/footer_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  color: #ccc;
}
</style>
